<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <style>
        .login-form {
            width: 300px;
            margin: 20px auto;
        }
    </style>
</head>
<body>
<form class="login-form">
    <h1>登陆</h1>
    <form id="form1">
        {% csrf_token %}
        用户名：<input type="text" name="username" value="{{ username }}"><br/>
        密码: <input type="password" name="password"><br/>
        <input type="checkbox" name="remember" id="remember">记住用户名<br/>
        <input type="submit" value="登录">
    </form>
</form>

</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

<script>
    $(function () {
        $('.login-form').submit(function () {
            let username = $(this).find('[name="username"]').val();
            let password = $(this).find('[name="password"]').val();
            let csrfmiddlewaretoken = $(this).find('[name="csrfmiddlewaretoken"]').val();
            let remember = $(this).find('[type="checkbox"]').is(':checked');
            $.ajax('{% url 'booktest:login_check' %}', {
                type: 'json',
                method: 'post',
                data: {username, password, remember, csrfmiddlewaretoken}
            }).success(function (data) {
                location.href = '/books'
            }).error(function (msg) {
                console.log(msg)
            });
            return false;
        });
    });

</script>
</html>